<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box mt">
            <el-form ref="form" label-position="left" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="图片名称" prop="banner_name">
                    <el-input v-model="form.banner_name"></el-input>
                </el-form-item>
                <v-img imgType="banner" :img="form.banner_path" imgTips="轮播图片"></v-img>
                <el-form-item label="图片链接" prop="banner_url">
                    <el-input v-model="form.banner_url"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.number="form.sort"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">提交</el-button>
                    <el-button @click="navTop" v-if="!Edit">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import bus from '../../../bus.js';
import vImg from '../../common/OneImgUpload'
export default {
  name: 'v-form',
  components: {
    vImg  
  },
  data: function() {
    return {
      Edit: false,
      form: {
        id: undefined,
        banner_name: undefined,
        banner_path: undefined,
        banner_url: '#',
        sort: 0
      },
      upToken: undefined,
      imageUrl: undefined,
      rules: {
          banner_name: [
              { required: true, message: '请输入轮播图名称' }
          ],
          banner_url: [
              { required: true, message: '请输入轮播图外链接' }
          ],
          sort: [
              { required: true, message: '请填写排序' },
              { type: 'number', message: '排序必须是数字' }
          ]
      }
    }
  },
  methods: {
    onSubmit(formName) {
      //  进行规则验证
      if (this.form.banner_path === undefined) {
          this.$message.error('请添加轮播图片!');
          return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
            // 验证通过，进行编辑/添加判断
            if (!this.Edit) {
                // 不是编辑，去除id
                delete this.form.id
                APP.ajax('post@banner/add', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('添加成功！');
                    }
                })
            } else {
                APP.ajax('post@banner/update', this.form, res => {
                    if (res.data.status === 200) {
                        this.$message.success('编辑成功！')
                    }
                })
            }
        } else {
          return false;
        }
      });
    },
    navTop() {
      bus.$emit('ViewShow', '取消');
    }
  },
  mounted () {
    // 判断是否有id传值，没有则不是编辑页面，而是添加页面
    if (this.$route.params.id) {
        this.Edit = true;
        APP.ajax('post@banner/detail', { id: this.$route.params.id }, res => {
            this.form = res.data.data[0];
        })
    }
    // 监听轮播图是否改变
    bus.$on('changeBannerImage', e => {
        this.form.banner_path = e;
    })
  }
}
</script>
<style scoped>
.avatar{
    float: left;
    width: 100%;
    height: 100%;
}
</style>
